<template>
	<view>
		<view class='search acea-row row-between-wrapper'>
			<view class='input acea-row row-between-wrapper'>
				<text class='iconfont icon-sousuo2'></text>
				<input type='text' :value='searchValue' :focus="focus" placeholder='请输入患者名称'
					placeholder-class='placeholder' @input="setValue"></input>
			</view>
			<view class='bnt' @tap='searchBut'>搜索</view>
		</view>
		<view class="nav">
			<uni-segmented-control ref="segRef" :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<view class="asking-box" v-if="askingList.length>0">
					<view class="list-item" v-for="(item,index) in askingList" @click="goDetail(item)">
						<view class="top-box">
							<view class="left">
								<view class="avatar">
									<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
									<image v-else src="/static/images/f.png" mode="aspectFill"></image>
								</view>
								<view class="name space">{{getShowName(item)}}</view>
								<view class="sex space">{{getShowSex(item)}}</view>
								<view class="age space">{{getShowAge(item)}}</view>
							</view>
							<view class="status">进行中</view>
						</view>
						<view class="patient-des">
							<text class="p-t">病情描述：</text>{{getPatientDes(item)}}
						</view>
						<view class="footer">
							<view class="time">{{item.create_time}}</view>
						</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper' @click="clickMore(false)">
						<text class='loading iconfont icon-jiazai'
							:hidden='askingLoading==false'></text>{{askingLoadTitle}}
					</view>
				</view>
				<view class="nodata" v-else>
					<emptyPage title="暂无数据～"></emptyPage>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="finish-box" v-if="finishList.length>0">
					<view class="list-item" v-for="(item,index) in finishList" @click="goDetail(item)">
						<view class="top-box">
							<view class="left">
								<view class="avatar">
									<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
									<image v-else src="/static/images/f.png" mode="aspectFill"></image>
								</view>
								<view class="name space">{{getShowName(item)}}</view>
								<view class="sex space">{{getShowSex(item)}}</view>
								<view class="age space">{{getShowAge(item)}}</view>
							</view>
							<view class="status1">已结束</view>
						</view>
						<view class="patient-des">
							<text class="p-t">病情描述：</text>{{getPatientDes(item)}}
						</view>
						<view class="footer">
							<view class="time">{{item.create_time}}</view>
						</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper' @click="clickMore(false)">
						<text class='loading iconfont icon-jiazai'
							:hidden='finishLoading==false'></text>{{finishLoadTitle}}
					</view>
				</view>
				<view class="nodata" v-else>
					<emptyPage title="暂无数据～"></emptyPage>
				</view>
			</view>
		</view>

		<view></view>
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue';
	
	import {
		docInquiryList
	} from '@/api/doc_appointment.js';
	import {
		getConversationStatus
	} from '@/api/inquiry.js';
	import {
		mapGetters
	} from "vuex";
	import {userAgeFormat } from "@/utils/format.js";
	export default {
		components: {
			emptyPage
		},
		computed: {
			...mapGetters(['userInfo', 'uid','routeError'])
		},
		data() {
			return {
				searchValue: '',
				focus: false,

				items: ['待就诊', '已结束'],
				current: 0,
				activeColor: '#38ce8c',
				styleType: 'text',

				askingLoadTitle: '加载更多',
				askingLoading: false,
				askingLoadend: false,
				askingWhere: {
					'page': 1,
					'limit': 20,
					'type':'0',//0.图文问诊  1.在线问诊
					'name':''
				},
				askingList: [],
				finishLoadTitle: '加载更多',
				finishLoading: false,
				finishLoadend: false,
				finishWhere: {
					'page': 1,
					'limit': 20,
					'type':'0',//0.图文问诊  1.在线问诊
					'name':''
				},
				finishList: [],
				isSearch: false,
			}
		},
		onLoad() {
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			// this.getAskingList();
		},
		onShow() {
			let that = this;
			this.$nextTick(()=>{
				that.searchBut();
			})
		},
		onPullDownRefresh() {
			console.log('rk==>refresh')
			this.clickMore(true);
		},
		onReachBottom() {
			this.clickMore(false);
		},

		methods: {
			getPatientDes(item){
				let des = item.describe.replace("/\n/g","");
				return des;
			},
			getShowAge(item){
				let birthday = '-';
				if(item.patient_info){
					birthday = item.patient_info.birthday;
				}
				return userAgeFormat(birthday.split('-'));
			},
			getShowSex(item){
				let patient_info = item.patient_info;
				let gender = 0;
				if(patient_info){
					gender = patient_info.gender;
				}
				return (gender == 1) ? '女':'男';
			},
			getShowName(item) {
				let patient_info = item.patient_info;
				if(patient_info){
					return patient_info.name;
				}
				return item.nickname;
			},
			setValue: function(event) {
				this.$set(this, 'searchValue', event.detail.value);

				this.askingWhere.name = this.searchValue;
				this.finishWhere.name = this.searchValue;

				console.log('rk==>[...]' + JSON.stringify(this.searchValue));
				// 清空自动搜索
				if (this.searchValue == '') {
					this.searchBut();
				}
			},
			searchBut: function() {
				this.isSearch = true;
				this.onClickItem(this.$refs.segRef);
			},

			onClickItem(e) {

				console.log("rk===>[e]" + e.currentIndex);

				if (this.current !== e.currentIndex || this.isSearch) {
					this.current = e.currentIndex
					uni.stopPullDownRefresh();

					if (this.current == 1 ) {
						this.isSearch = false;
						this.finishLoadend = false;
						this.finishWhere.page = 1;
						this.getFinishList();
					}

					if (this.current == 0 ) {
						this.isSearch = false;
						this.askingLoadend = false;
						this.askingWhere.page = 1;
						this.getAskingList();
					}

				}
			},
			/**
			 * 更多
			 */
			clickMore(isRefresh) {

				if (this.current == 1) {

					if (this.finishLoadend && !isRefresh) {
						uni.stopPullDownRefresh();
						return
					}
					this.finishLoadend = false;
					if (isRefresh) {
						this.finishWhere.page = 1;
					}
					this.getFinishList();

				} else {
					if (this.askingLoadend && !isRefresh) {
						uni.stopPullDownRefresh();
						return
					}
					this.askingLoadend = false;
					if (isRefresh) {
						this.askingWhere.page = 1;
					}
					this.getAskingList();
				}
			},
			/**
			 * 进行中
			 */
			getAskingList() {
				let that = this;

				that.askingWhere.uid = this.uid;
				//进行中
				that.askingWhere.conversation_status = 0;

				docInquiryList(that.askingWhere).then(res => {
					uni.stopPullDownRefresh();

					if (that.askingWhere.page == 1) {
						that.askingList = [];
					}
					let resList = res.data.list;
					let allCount = res.data.count;
					that.askingList = that.$util.SplitArray(resList, that.askingList);
					that.$set(that, 'askingList', that.askingList);
					let loadend = that.askingList.length >= allCount;

					console.log('rk==>[xx]' + allCount + '[xx]' + that.askingList.length + '[bool]' + loadend);

					that.askingLoadend = loadend;
					that.askingLoadTitle = loadend ? '我也是有底线的' : '加载更多';
					that.askingWhere.page += 1;
					that.askingLoading = false;
				});

			},
			/**
			 * 已完成
			 */
			getFinishList() {
				let that = this;
				that.finishWhere.uid = this.uid;
				// 已完成
				that.finishWhere.conversation_status = 1;
				docInquiryList(that.finishWhere).then(res => {
					uni.stopPullDownRefresh();

					if (that.finishWhere.page == 1) {
						that.finishList = [];
					}
					let resList = res.data.list;
					let allCount = res.data.count;
					that.finishList = that.$util.SplitArray(resList, that.finishList);
					that.$set(that, 'finishList', that.finishList);
					let loadend = that.finishList.length >= allCount;

					console.log('rk==>[xx]' + allCount + '[xx]' + that.finishList.length + '[bool]' + loadend);

					that.finishLoadend = loadend;
					that.finishLoadTitle = loadend ? '我也是有底线的' : '加载更多';
					that.finishWhere.page += 1;
					that.finishLoading = false;
				});

			},
			
			/**
			 * 详情
			 */
			goDetail(item) {
				// 接口获取是否完成
				let where = {
					'conversation_id':item.conversation_id,
				}
				let that = this;
				getConversationStatus(where).then(res => {
					if(res.status == 200){
						let status = res.data.info;
						//console.log('rk==>[status]'+JSON.stringify(res));
						that.jumpUrl(item,status);
					}else {
						that.$util.Tips({
							title:res.message
						})
					}
				}).catch(err => {
					//console.log('rk===>'+JSON.stringify(err))
					that.$util.Tips({
						title: err
					});
				});
			},
			jumpUrl(item,status){
				
				uni.navigateTo({
					url: '/pages/shops/subs_inquiry/record/picTextDetail?conversation_id='+item.conversation_id+'&conversation_status='+status+'&role=doctor',
				})
			}

		}
	}
</script>

<style lang="scss">
	page {}

	.search {
		padding-left: 30rpx;
	}

	.search {
		padding: 20rpx 0;
		background-color: #fff;
	}

	.search .input {
		width: 588rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
		margin-left: 30rpx;
	}

	.search .input input {
		width: 472rpx;
		font-size: 28rpx;
	}

	.search .input .placeholder {
		color: #bbb;
	}

	.search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}

	.search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #282828;
	}

	.nav {
		background-color: #fff;
	}

	.content {
		margin: 20rpx 0rpx;

		.list-item {
			background-color: #fff;
			margin: 20rpx 0;
			border-radius: 0rpx;
			padding: 30rpx 30rpx 0rpx;
		}
		.top-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 80rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.space {
					margin-left: 15rpx;
				}
			}
			.status {
				color: #ff0000;
			}
			.status1 {
				color: #969696;
			}
		}
		.patient-des {
			padding: 20rpx 0;
			color: #969696;
			.p-t {
				color: #323232;
			}
		}
		.footer {
			height: 80rpx;
			border-top: 2rpx solid #eee;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 24rpx;
			color: #969696;
		}
		
	}
</style>
